<template>
    <div class="bigbox" ref="bigbox">
        <div class="btnBack">
            <div @click="back">
                <DoubleLeftOutlined /> 返回
            </div>
        </div>
        <ul>
            <li v-for="info in infos">
                <div v-show="info.type == 'text'" class="text">
                    {{ info.content }}
                </div>
                <photo-provider :default-backdrop-opacity="0.5">
                    <photo-consumer class="img" :inro="info.title" :src="info.imageUrl">
                        <img v-show="info.type == 'img'" :src="info.imageUrl" alt="">
                    </photo-consumer>
                </photo-provider>
                <div v-if="info.type == 'video'" class="video">
                    <svg-icon @click="playVideo(info.videoUrl)" class="icon" :color="color" name="play" width="100"
                        height="100"></svg-icon>
                    <img :src="info.imageUrl" alt="">
                </div>
            </li>
        </ul>
        <BackTop :dom="bigbox"></BackTop>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { newsDetails } from '@/api/index'
import { DoubleLeftOutlined } from '@ant-design/icons-vue'
import themeStore from '@/store/theme'
const themes = themeStore()
const color: any = ref(themes.$state.themeColor)
const bigbox = ref(null)
const props = defineProps(['newsId'])
const emits = defineEmits(['backContent'])
const infos: any = ref([])
const back = () => {
    emits('backContent')
}
const getData = async (newsId: number | string) => {
    infos.value = []
    const result = await newsDetails({ newsId })
    infos.value = result.data.items
}
const playVideo = (videoSrc: any) => {
    // 打开新窗口  
    const newWindow = window.open(videoSrc[0]);
    if (newWindow) {
        newWindow.focus(); // 将焦点设置到新窗口上  
        setTimeout(() => {
            newWindow.focus();
        }, 100)
    } else {
        alert('浏览器阻止了弹出窗口');
    }
}
onMounted(() => {
    getData(props.newsId)
})

</script>

<style scoped lang="scss">
.bigbox {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: 'Yasong',
        sans-serif;

    .btnBack {
        position: sticky;
        top: 0;
        left: 0;
        padding: 10px;
        z-index: 20;
        position: absolute;
        height: 60px;
        width: 100%;
    
        div {
            width: 100px;
            background-color: var(--themeColor);
            color: white;
            padding: 10px;
            cursor: pointer;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            display: none;

        }

        &:hover div {
            display: block;
        }
    }

    ul {
        overflow-y: auto;
        list-style-type: none;
        height: 98%;
        @include scroll-bar();
        padding-top: 2%;

        li {
            padding: 0 10px;
            font-size: 18px;
            display: inline-block;
            width: 100%;
            break-inside: avoid;

            .text {
                text-indent: 2rem;
            }

            .img {
                width: 100%;
                text-align: center;
                margin: 10px 0;

                img {
                    width: 80%;
                    margin: 0 auto;
                }
            }

            .video {
                position: relative;
                text-align: center;

                .icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    cursor: pointer;
                }

                img {
                    width: 80%;
                    margin: 0 auto;
                }
            }
        }
    }
}
</style>